<template>
    <div class="view-content">
        <div class="view-list">
            <div class="view-item">
                <div class="xy-view view-container">
                    <div class="view-item__header">
                        3D效果展示
                    </div>
                    <div class="view-item__content">
                        <Three ref="ThreeRef" />
                    </div>
                </div>
            </div>
            <div class="view-item">
                <div class="xy-view view-container">
                    <div class="view-item__header">
                        2D截面展示
                    </div>
                    <div class="view-item__content">
                        <img src="@/assets/optical-2D.png"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
    name: 'ViewContent'
})
</script>
<script lang="ts" setup>
import { reactive, getCurrentInstance } from 'vue'
import Three from './Three.vue';
const { proxy } = getCurrentInstance() as any
const mainRef = reactive({
    figures: {} as any,
    isShow: false,
    currentIndex: '',
    isBack: false
}) as any
const init = () => {
    proxy.$refs.ThreeRef.init()
}
const clickOutsideHandle = () => {
    mainRef.isShow = false
    mainRef.currentIndex = ''
}
const toggleOpen = (idx:any) => {   
    mainRef.currentIndex = idx
    mainRef.isShow = !mainRef.isShow
}
defineExpose({
    init
})
</script>